<template>
  <div>
    <el-row v-if="!workData.account" style="flex: 1;">
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/workNum.png" alt="">表情数量</div>
          <div class="content">{{ workData.workNum | bigDataFilter }}</div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/time.png" alt="">上架时间</div>
          <div v-if="workData.publishTime" class="content">{{ workData.publishTime | format('YYYY/MM/DD') }}</div>
          <div v-else class="content">--</div>
        </div>
      </el-col>
      <el-col :span="6" :class="[workData.account?'horizontal':'column']" class="ip-info-list">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/biaoqingType.png" alt="">表情包类型</div>
          <div v-if="workData.type" class="content">
            <span v-if="workData.type === 1">原创</span>
            <span v-if="workData.type === 2">商业</span>
            <span v-if="workData.type === 3">联名</span>
          </div>
          <div v-else>--</div>
        </div>
        <div v-if="workData.account" class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/workNum.png" alt="">发布账号</div>
          <div v-if="workData.account.length > 3" class="content">
            <ToolTip :content="workData.account"/>
          </div>
          <div v-else>{{ workData.account || '--' }}</div>
        </div>
        <div :span="6" class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/effect.png" alt="">表情包效果</div>
          <div v-if="workData.effect" class="content">{{ workData.effect === 1?'动态':'静态' }}</div>
          <div v-else>--</div>
        </div>
      </el-col>
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/likePrice.png" alt="">总赞赏金额</div>
          <div class="content">
            <ToolTip :content="workData.rewardPrice">
              <div class="inner-content">{{ workData.rewardPrice | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/likeNum.png" alt="">总赞赏次数</div>
          <div class="content">
            <ToolTip :content="workData.rewardNum">
              <div class="inner-content">{{ workData.rewardNum | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/downloadNum.png" alt="">总下载量</div>
          <div class="content">
            <ToolTip :content="workData.downloadNum">
              <div class="inner-content">{{ workData.downloadNum | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/sengNum.png" alt="">总发送量</div>
          <div class="content">
            <ToolTip :content="workData.sendNum">
              <div class="inner-content">{{ workData.sendNum | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/workNum.png" alt="">表情数量</div>
          <div class="content">{{ workData.workNum | bigDataFilter }}</div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/downloadNum.png" alt="">总下载量</div>
          <div class="content">
            <ToolTip :content="workData.downloadNum">
              <div class="inner-content">{{ workData.downloadNum | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/time.png" alt="">上架时间</div>
          <div v-if="workData.publishTime" class="content">{{ workData.publishTime | format('YYYY/MM/DD') }}</div>
          <div v-else class="content">--</div>
        </div>
      </el-col>
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/biaoqingType.png" alt="">表情包类型</div>
          <div v-if="workData.type" class="content">
            <span v-if="workData.type === 1">原创</span>
            <span v-if="workData.type === 2">商业</span>
            <span v-if="workData.type === 3">联名</span>
          </div>
          <div v-else>--</div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/sengNum.png" alt="">总发送量</div>
          <div class="content">
            <ToolTip :content="workData.sendNum">
              <div class="inner-content">{{ workData.sendNum | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/account.png" alt="">发布账号</div>
          <div v-if="workData.account.length > 3" class="content">
            <ToolTip :content="workData.account"/>
          </div>
          <div v-else class="content">{{ workData.account || '--' }}</div>
        </div>
      </el-col>
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item horizontal">
          <div class="title"><img src="../../../assets/mengli/effect.png" alt="">表情包效果</div>
          <div v-if="workData.effect" class="content">{{ workData.effect === 1?'动态':'静态' }}</div>
          <div v-else>--</div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/likeNum.png" alt="">总赞赏次数</div>
          <div class="content">
            <ToolTip :content="workData.rewardNum | bigDataFilter"/>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="ip-info-list column">
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/likePrice.png" alt="">收费方式</div>
          <div class="content">
            <ToolTip v-if="workData.charge" :content="workData.charge">
              <div>¥{{ workData.charge | moneyFilter(true, '', true) }}</div>
            </ToolTip>
            <div v-else-if="workData.charge === 0">免费</div>
            <div v-else>--</div>
          </div>
        </div>
        <div class="ip-info-item">
          <div class="title"><img src="../../../assets/mengli/likePrice.png" alt="">总赞赏金额</div>
          <div class="content">
            <ToolTip :content="workData.rewardPrice">
              <div>{{ workData.rewardPrice | bigDataFilter }}</div>
            </ToolTip>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { format } from '@/filters/date';
export default {
  filters: { moneyFilter, format, bigDataFilter },
  props: {
    workData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-info-list {
  .ip-info-item {
    margin-right: 5px;
    .title {
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:1.2;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .content {
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:16px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
      display: flex;
    }
    &:last-child {
      margin-bottom: 0 !important;
      margin-right: 0;
    }
  }
  &.column {
    .ip-info-item {
      margin-bottom: 40px;
     }
    .title {
      margin-bottom: 20px;
    }
  }
  &.horizontal {
    .ip-info-item {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      .title {
        width: 95px;
        margin-right: 3px;
      }
      .content {
        flex: 1;
      }
    }
  }
}
.inner-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
</style>
